<style scoped lang="less">
.authorityList {
  max-width: 800px;
  margin: 0 auto;

  &__title{
    font-size: 20px;
    font-weight: 400;
    color: #141B27;
  }

  &__list{
    width: 100%;
    height: 240px;
    margin: 10px 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;

    &__left{
      margin-right: 20px;
      width: 150px;
      height: 150px;
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      &:hover > &__play-button{
        opacity: 1;
        backdrop-filter: blur(2px);
        transform: scale(1) translate(-50%,-50%);

      }
      &:hover > &__cover{ transform: scale(1.2);}
      &__cover{
        transition: all linear .3s;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      &__update-time{
        position: absolute;
        left: 50%;
        bottom: 30%;
        transform: translate(-50%,50%);
        font-weight: 400;
        font-size: 12px;
        color: #e3e3e3;
        white-space: nowrap;
      }
      &__play-button{
        border-radius: 50%;
        transition: all linear .3s;
        position: absolute;
        top: 50%;
        left: 50%;
        opacity: 0;
        transform-origin: center;
        transform: translate(-50%,-50%) scale(5);
        background: rgba(255, 255, 255, 0.53);
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        &__icon{
          margin-left: 2px;
          width: 20px;
          height: 20px;
        }
      }
    }

    &__right{
      flex: 1;
      height: 100%;
      &__list{
        &__row{
          height: 35px;
          width: 100%;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;
          padding: 0 12px;
          cursor: pointer;
          &:nth-of-type(2n){
            background: rgba(229, 229, 229, 0.4);
          }
          transition: all linear .1s;
          &:hover{
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 5px 3px 10px 3px rgba(0, 0, 0, 0.2);
          }
          &__name{
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            &__title{
              color: #1e202a;
              margin-right: 10px;
              font-size: 12px;
            }
            &__album{
              color: #999999;
              font-size: 12px;
            }
          }
          &__singer{
            font-size: 12px;
            color: #999999;
          }
        }
      }
      &__show-more{
        margin-top: 10px;
        cursor: pointer;
        &:hover > &__text{
          color: firebrick;
        }
        &__text{
          transition: all ease-in-out .3s;
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }
}
</style>
<template>
  <div class="authorityList">
    <div class="authorityList__title">官方榜</div>
    <div class="authorityList__list" v-for="(ele,index) of listCom" :key="index">
      <!--   拖片   -->
      <div class="authorityList__list__left" @click="handleGoDetail(ele)">
        <img :src="ele.coverImageUrl" class="authorityList__list__left__cover">
        <div class="authorityList__list__left__update-time">{{ ele.updateTime }}</div>
        <div class="authorityList__list__left__play-button" @click.stop="handlePlayList(ele)">
          <img :src="playIcon" class="authorityList__list__left__play-button__icon">
        </div>
      </div>
      <!--    列表  -->
      <div class="authorityList__list__right">
        <div class="authorityList__list__right__list">
          <div class="authorityList__list__right__list__row" @click="handlePlaySingle(item)" v-for="(item,index) of ele.songList" :key='index'>
            <div class="authorityList__list__right__list__row__name">
              <div class="authorityList__list__right__list__row__name__title">{{ item.name }}</div>
              <div class="authorityList__list__right__list__row__name__album">{{ item.alia }}</div>
            </div>
            <div class="authorityList__list__right__list__row__singer">{{ item.singer }}</div>
          </div>
        </div>
        <div class="authorityList__list__right__show-more" @click="handleGoDetail(ele)">
          <div class="authorityList__list__right__show-more__text">查看全部 ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// todo 资源
import { AxiosService } from "@/core";
const axios = new AxiosService('netEasyMusic')
import {computed, ref, watch,Ref} from "vue";
import NetEasyMusicStore from '../../store'
//@ts-ignore
import playIcon from '../../icon/play-red.png'
import {formatDuring} from "@/helper";
import dayjs from "dayjs";
const props = defineProps({
  list: { type:Array, default: () => ([]) }, // 列表
})
const listCom = <Ref>ref([])
watch(() => props.list, value => {
  value?.forEach(async (ele:any) => {
    let obj = {
      ...ele,
      coverImageUrl: ele?.coverImgUrl, // 封面
      updateTime: ele?.updateTime ? dayjs.unix(ele?.updateTime).format('MM月DD日更新') : null, // 更新时间
      songList:  await getMusicById(ele?.id).then((res:any) => (res?.map((item:any) => ({
        ...item,
        name: item?.name ?? '-', // 歌曲名称
        alia: item?.alia && item?.alia.length ? `(${item?.alia?.reduce((total:string,current:any,index:number) => total+= index === 0 ? current : '/' + current,'')})` : '',// 别名
        singer: item?.ar?.reduce((total:string,current:any,index:number) => total+= index === 0 ? current?.name : `/${current?.name}`,''), // 歌手
      })))), // 歌曲列表
    }
    listCom.value.push(obj)
  })
})
// 请求
const getMusicById = async (id:number | string) => {
  return await axios.get({
    api:'/playlist/track/all',
    params:{ id,limit:5 },
    success: ({songs}) => (songs ?? []),
    fail: err => ([])
  })
}
// 交互
/** 播放全部 */
const handlePlayList = ( event:any ) => {
  const { id } = event
  if(!id) return
  NetEasyMusicStore.setPlayListById(id)
}
/** 进入详情页 */
const handleGoDetail = (event:any) => {
  const { id } = event
  NetEasyMusicStore.pushRouter('playListDetail',{id})
}
/** 单曲播放 */
const handlePlaySingle = (event:any) => {
  const { id } = event
  if(!id) return
  NetEasyMusicStore.setPlayList(id,false,true,'next')
}
</script>

